<template>
  <div class="asset">
    <div class="user-account item">
      <span>账户余额：{{walletData.income}}中亿币</span>
      <button class="recharge" @click="$router.push('/recharge')">充值</button>
      <button class="fr sign" @click="$router.push('/checkIn')">签到</button>
    </div>
    <div class="con">
      <div class="item-h">
        <span class="ftz16">我的资产</span>
      </div>
      <div class="asset-charge">
        <div class="charge-h">
          <span class="line"></span>
          <span class="ftz16">我的中亿币</span>
        </div>
        <div class="balance">
          <strong class="ftz30">{{walletData.income}}</strong>中亿币
          <span class="tip">1中亿币=0.1元</span>
        </div>
        <button class="detail" style="display: none" id="detailBtn">交易明细</button>
        <!-- <button class="recharge" id="rechargeBtn" @click="$router.push('/recharge')">充值</button> -->
      </div>
      <!-- 交易明细 -->
      <div class="deal-detial" id="dealDetialC">
        <div class="deal-detial-h" id="dealDetail">
          <span @click="changeTab('cz')" :class="{'on': curTab === 'cz'}">充值明细</span>
          <span @click="changeTab('xf')" :class="{'on': curTab === 'xf'}">消费明细</span>
          <span @click="changeTab('other')" :class="{'on': curTab === 'other'}">其他明细</span>
        </div>
        <div class="deal-detial-c">
          <!-- 充值明细 -->
          <div class="record-c" v-if="curTab === 'cz'">
            <div class="record-tab">
              <table>
                <tr>
                  <th>充值金额</th>
                  <th>换算中亿币</th>
                  <th>类型</th>
                  <th>状态</th>
                  <th>时间</th>
                </tr>
                <tr v-for="(item, index) in rechargeData.list" :key="index">
                  <td>{{item.amountRMB}}</td>
                  <td>{{item.amount}}</td>
                  <td>{{item.payTypeName}}</td>
                  <td>{{item.status === 0?'已入账':'已失效'}}</td>
                  <td>{{item.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</td>
                </tr>
              </table>
            </div>
            <button v-if="total>rechargeData.list.length" @click="loadMore('cz')" class="load_more ftz16">点击加载更多...</button>
            <button v-if="total===rechargeData.list.length" class="load_more ftz16">数据已经全部加载</button>
          </div>
          <!-- 消费明细 -->
          <div class="record-c" v-if="curTab === 'xf'">
            <div class="record-tab">
              <table>
                <tr>
                  <th>栏目</th>
                  <th>事项</th>
                  <th>类型</th>
                  <th>支付方式</th>
                  <th>时间</th>
                  <th>金额（中亿币）</th>
                  <th>状态</th>
                </tr>
                <tr v-for="(item, index) in walletExpendData.list" :key="index">
                  <td>{{item.columnName}}</td>
                  <td>{{item.businessDesc}}</td>
                  <td>{{item.sourceName}}</td>
                  <td>{{item.payTypeName}}</td>
                  <td>{{item.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</td>
                  <td>{{item.amount}}</td>
                  <td>{{item.status === 0?'已出账':'已失效'}}</td>
                </tr>
              </table>
            </div>
            <button v-if="total>walletExpendData.list.length" @click="loadMore('xf')" class="load_more ftz16">点击加载更多...</button>
            <button v-if="total===walletExpendData.list.length" class="load_more ftz16">数据已经全部加载</button>
          </div>
          <!-- 其他明细 -->
          <div class="record-c" v-if="curTab === 'other'">
            <div class="record-tab">
              <table>
                <tr>
                  <th>支付方式</th>
                  <th>类型</th>
                  <th>金额（中亿币）</th>
                  <!-- <th>扣税（元）</th> -->
                  <th>状态</th>
                  <th>时间</th>
                </tr>
                <tr v-for="(item, index) in otherData.list" :key="index">
                  <td>{{item.payTypeName}}</td>
                  <td>{{item.sourceName}}</td>
                  <td>{{item.amount}}</td>
                  <td>{{item.statusText}}</td>
                  <td>{{item.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</td>
                </tr>
              </table>
            </div>
            <button v-if="total>otherData.list.length" @click="loadMore('other')" class="load_more ftz16">点击加载更多...</button>
            <button v-if="total===otherData.list.length" class="load_more ftz16">数据已经全部加载</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Laypage from '@/components/laypage'
import { mapState } from 'vuex'
import * as api from '@/service/api'
export default {
  components: {
    Laypage
  },
  data () {
    return {
      walletData: {},
      total: null,
      curTab: 'cz',
      curClassify: '',
      searchData: {
        pageSize: 10,
        pageNum: 1
      },
      walletExpendData: {
        list: []
      },
      rechargeData: {
        list: []
      },
      otherData: {
        list: []
      },
      loading: false
    }
  },
  created () {
    this.getAssetRecharge()
    this.getWallet()
  },
  computed: {
    // 来源网址
    url () {
      return this.$route.query.url || ''
    },
    curRoute () {
      return this.$route.path
    },
    ...mapState({
      me: state => state.me
    })
  },
  methods: {
    changeTab (data) {
      this.curTab = data
      this.searchData.pageNum = 1
      switch (this.curTab) {
        case 'cz':
          this.getAssetRecharge()
          break
        case 'xf':
          this.getWalletExpend()
          break
        case 'other':
          this.getWalletOther()
          break
      }
    },
    loadMore (data) {
      ++this.searchData.pageNum
      switch (this.curTab) {
        case 'cz':
          this.getAssetRecharge()
          break
        case 'xf':
          this.getWalletExpend()
          break
        case 'other':
          this.getWalletOther()
          break
      }
    },
    async getWallet () {
      this.loading = true
      let res = await api.getWallet()
      this.walletData = res.data
      this.loading = false
    },
    async getWalletExpend () {
      // 消费记录
      let res = await api.getWalletExpend(...this.searchData)
      if (this.searchData.pageNum === 1) {
        this.walletExpendData = res.data
      } else {
        this.walletExpendData.list = this.walletExpendData.list.concat(res.data.list)
      }
      this.total = res.data.total
    },
    async getAssetRecharge () {
      // 充值记录
      this.loading = true
      let res = await api.getAssetRecharge(...this.searchData)
      if (this.searchData.pageNum === 1) {
        this.rechargeData = res.data
      } else {
        this.rechargeData.list = this.rechargeData.list.concat(res.data.list)
      }
      this.total = res.data.total
      this.loading = false
    },
    async getWalletOther () {
      // 其他明细
      let res = await api.getWalletOther({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
      if (this.pageNum === 1) {
        this.otherData = res.data
      } else {
        this.otherData.list = this.otherData.list.concat(res.data.list)
      }
      this.total = res.data.total
    }
  }
}
</script>
<style lang="scss">
@import "../../style/res/useasset";
</style>
